<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详细信息</title>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<div>
    <h2 id="header" style="position:absolute;top:0px;left:10px">监测点:红庄</h2>
    <div style="color:green;font-family:verdana;font-size:100%;display:flex;display: -webkit-flex;position:absolute;top:50px;left:10px">
        <strong>
            此时监测点的空气总体质量为:
            <span id = "tips" style="color:red;font-size:150%"></span>
            <span id= "time"></span>
        </strong>
    </div>
    <div style="color:red;position:absolute;top:90px;left:330px">
        <h3>近12h大气质量变化(数据每1h更新)</h3>
    </div>
    <div id="main1" style="width: 420px;height:350px;position:absolute;top:150px;left:100px"></div>
    <div id="main2" style="width: 420px;height:350px;position:absolute;top:150px;left:550px"></div>
    <div id="main3" style="width: 420px;height:350px;position:absolute;top:500px;left:100px"></div>
    <div id="main4" style="width: 420px;height:350px;position:absolute;top:500px;left:550px"></div>
    <div id="main5" style="width: 420px;height:350px;position:absolute;top:850px;left:100px"></div>
    <div id="main6" style="width: 420px;height:350px;position:absolute;top:850px;left:550px"></div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

    var date = [];
    var myDate = new Date();
    var y = myDate.getFullYear();
    var m = (myDate.getMonth()+1);
    var d =  myDate.getDate();
    var h =  myDate.getHours()+1;
    for(let i=0;i<12;i++){
        var time = "";
        h = h-1;
        if(h<0){
            h = 23;
            d = d -1;
            if(d<0){
                d = 31;
                m = m -1;
            }
        }
        time = y+"/"+m+"/"+d+"\n"+h+":00";
        date[i]=time;
    }
    date.reverse();



    $.get('http://localhost:80/search', function (res) {
         var data_co = [];
         var data_so2= [];
         var data_o3 = [];
         var data_PM25=[];
         var data_PM10=[];
         var data_aqi= [];
         console.log(res);
         var index =4;
         for(var i=0;i<12;i++){
               data_co[i] = res[index].co*1000;
               data_so2[i]= res[index].so2;
               data_o3[i]=res[index].o3;
               data_PM25[i]=res[index].pm2_5;
               data_PM10[i]=res[index].pm10;
               data_aqi[i]=res[index].aqi;
               index += 6;
         }
         var quality = res[index-6].quality;
         console.log(data_co);
         document.getElementById("tips").innerHTML=quality;
         document.getElementById("time").innerHTML="(更新时间为:"+date[11]+")";
         var myChart1 = echarts.init(document.getElementById('main1'));
         option1 = {
            title: {
                text: '大气中CO的含量',
                subtext: '数值单位:  μg/m3',
                left: 'center',
                align: 'right'
            },
             grid: {
             left: '3%',   //图表距边框的距离
             right: '4%',
             bottom: '3%',
             containLabel: true
            },
             tooltip: {
                trigger: 'axis'
            },

            xAxis: {
                type: 'category',
                data:  date
            },
            yAxis: {
                type: 'value'
            },
            series: [
            {
                name: "CO含量",
                data: data_co,
                type: 'line'
            }]
        };
        myChart1.setOption(option1);

        var myChart2 = echarts.init(document.getElementById('main2'));
        option2 = {
            title: {
                text: '大气中SO2的含量',
                subtext: '数值单位:  μg/m3',
                left: 'center',
                align: 'right'
            },
             grid: {
             left: '3%',   //图表距边框的距离
             right: '4%',
             bottom: '3%',
             containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: date
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: "SO2含量",
                data: data_so2,
                type: 'line'
            }]
        };
        myChart2.setOption(option2);

        var myChart3 = echarts.init(document.getElementById('main3'));
        option3 = {
            title: {
                text: '大气中O3的含量',
                subtext: '数值单位:  μg/m3',
                left: 'center',
                align: 'right'
            },
             grid: {
             left: '3%',   //图表距边框的距离
             right: '4%',
             bottom: '3%',
             containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: date
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: "O3含量",
                data: data_o3,
                type: 'line'
            }]
        };
        myChart3.setOption(option3);

        option4 = {
            title: {
                text: '大气中PM2.5的含量',
                subtext: '数值单位:  μg/m3',
                left: 'center',
                align: 'right'
            },
             grid: {
             left: '3%',   //图表距边框的距离
             right: '4%',
             bottom: '3%',
             containLabel: true
            },
            xAxis: {
                type: 'category',
                data:  date
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: 'axis'
            },
            series: [{
                name: "PM2.5含量",
                data: data_PM25,
                type: 'line'
            }]
        };

        option5 = {
            color:"#00BFFF",
            title: {
                text: '综合空气质量指数',
                left: 'center',
                align: 'right'
            },
             grid: {
             left: '3%',   //图表距边框的距离
             right: '4%',
             bottom: '3%',
             containLabel: true
            },
            xAxis: {
                type: 'category',
                data: date
            },
            yAxis: {
                type: 'value'
            },
            label: {
                show: true,
                position: 'insideTop'
            },
            series: [{
                data: data_aqi,
                type: 'bar',
            }]
        };
        option6 = {
            title: {
                text: '大气中PM10的含量',
                subtext: '数值单位:  μg/m3',
                left: 'center',
                align: 'right'
            },
             grid: {
             left: '3%',   //图表距边框的距离
             right: '4%',
             bottom: '3%',
             containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: date
            },
            yAxis: {
                type: 'value'
            },
            series: [{
            name: "PM10",
            data: data_PM10,
            type: 'line'
            }]
       };
        var myChart4 = echarts.init(document.getElementById('main4'));
        myChart4.setOption(option4);

        var myChart5 = echarts.init(document.getElementById('main5'));
        myChart5.setOption(option5);

        var myChart6 = echarts.init(document.getElementById('main6'));
        myChart6.setOption(option6);
});
</script>
</html>